<template>
  <div>
    <el-input
      :value="brandOrg | filterBrandOrg"
      readonly
      placeholder="选择品牌代理商">
      <i
        slot="suffix"
        class="el-input__icon el-icon-circle-plus"
        @click="openDia"/>
    </el-input>
    <el-dialog
      ref="dia"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      custom-class="r-dialog"
      title="选择品牌代理商"
      top="5vh"
      width="75%"
    >
      <el-row :gutter="20" style="min-height: 450px">
        <el-col :span="6">
          <el-input
            v-model="filterText"
            style="margin-top: 1px;"
            placeholder="输入关键字进行过滤"
            size="mini"/>
          <el-tree
            ref="tree"
            :data="jsonTree"
            :filter-node-method="filterNode"
            :default-expanded-keys="[10000]"
            style="margin-top: 12px;"
            node-key="id"
            highlight-current
            @node-click="nodeClickHandle"
          />
        </el-col>
        <el-col :span="18">
          <el-form ref="orgform" :inline="true" :model="search" size="mini">
            <el-form-item prop="group_code">
              <el-input v-model="search.group_code" placeholder="品牌"/>
            </el-form-item>
            <el-form-item prop="shortname">
              <el-input v-model="search.shortname" placeholder="代理商"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchHandle">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-refresh"
                @click="resetForm('orgform')">重置
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="table.list"
            :header-cell-class-name="()=>'baseTable'"
            stripe
            border
          >
            <el-table-column
              prop="groupCode"
              label="品牌"
              width="120"
              show-overflow-tooltip
            />
            <el-table-column
              prop="shortname"
              label="代理商"/>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-check" @click="selectHandle(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <Pagination
            :data="table"
            @change-size="changeSizeHandle"
            @change-page="changePageHandle"
          />
        </el-col>
      </el-row>
      <span v-if="isShowFoot" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getJsonTree } from '@/utils/index'
import formMixins from '@/mixins/formMixins'
import { getOrgList, getGroupTree } from '@/api/base/payment'
import { mapGetters } from 'vuex'

export default {
  name: 'BrandOrgSelect',
  components: {
    Pagination
  },
  filters: {
    filterBrandOrg(val) {
      if (!val) {
        return
      }
      const brand = val.brand || ''
      const org = val.orgName || ''
      const s = brand && org ? '-' : ''
      return brand + s + org
    }
  },
  mixins: [formMixins],
  props: {
    value: [Object, String, Number],
    isShowFoot: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      search: {
        pageNum: 1,
        pageSize: 5
      },
      dialogFormVisible: false,
      key: '',
      tree: [],
      loading: false,
      table: {},
      filterText: '',
      label: '',
      groupCode: ''
    }
  },
  computed: {
    jsonTree() {
      // eslint-disable-next-line no-return-assign
      this.tree.forEach(el => el.label = el.text)
      return getJsonTree(this.tree, 'id', 'parent')
    },
    brandOrg: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    value(val) {
      this.brandOrg = val
    },
    // brandOrg(val) {
    //   this.$emit('input', val)
    // },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.treeInit()
  },
  methods: {
    treeInit() {
      const param = {
        pageNum: this.search.pageNum,
        pageSize: this.search.pageSize,
        pkOrg: this.userInfo.pkOrg
      }
      getGroupTree(param).then(res => {
        this.tree = JSON.parse(res.data)
      })
    },
    searchHandle(id) {
      this.loading = true
      // 如果是管理员，则可以进行各品牌的代理商查询
      // 否则只能显示该品牌下的各个代理商
      if (this.userInfo.pkOrg === 10000) {
        if (id) {
          this.$set(this.search, 'parentOrg', id)
        }
        getOrgList(this.search).then(res => {
          this.loading = false
          this.table = res.data
        }).catch(err => {
          this.loading = false
        })
      } else {
        this.$set(this.search, 'parentOrg', this.userInfo.pkOrg)
        getOrgList(this.search).then(res => {
          this.loading = false
          this.table = res.data
        }).catch(err => {
          this.loading = false
        })
      }
    },
    openDia() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        const tree = this.$refs['tree']
        tree.setCurrentKey(this.search['parentOrg'] || 10000)
        this.searchHandle()
        this.filterText = ''
      })
    },
    nodeClickHandle(data) {
      const { id, label, groupCode } = data
      this.label = label
      this.groupCode = groupCode
      this.loading = true
      this.searchHandle(id)
    },
    changeSizeHandle(size) {
      this.search.pageSize = size
      this.searchHandle()
    },
    changePageHandle(page) {
      this.search.pageNum = page
      this.searchHandle()
    },
    selectHandle(data) {
      this.dialogFormVisible = false
      this.brandOrg = {
        brand: this.label,
        groupCode: data.groupCode,
        orgName: data.shortname,
        pkOrg: data.pkOrg,
        orgCode: data.serveCode
      }
    },
    confirmHandle() {
      this.dialogFormVisible = false
      this.brandOrg = {
        brand: this.label,
        groupCode: this.groupCode,
        orgName: null,
        pkOrg: null,
        orgCode: null
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>
